<template>
  <div class="budgetBox">
    <table class="input" border="1px solid rgba(212, 232, 228, 0.73)" cellspacing="0">
      <thead>
        <tr class="title">
          <th>科目</th>
          <th>预算金额（元）</th>
          <th>实际支出金额（元）</th>
          <th>支出比（%）</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="scheduleIntelligentCosts.length == 0">
          <td :colspan="4" class="operate">暂无数据</td>
        </tr>
        <tr v-for="(item, index) in scheduleIntelligentCosts" :key="index">
          <td>{{ item.subjectName }}</td>
          <td>
            <input
              type="text"
              @input="item.budgetAmount = NumberCheck(item.budgetAmount)"
              :maxlength="10"
              v-model="item.budgetAmount"
            />
          </td>
          <td><input type="number" disabled v-model="item.amount" /></td>
          <td>
            {{
              item.budgetAmount
              ? ((Number(item.amount) / Number(item.budgetAmount)) * 100).toFixed(2)
              : 0
            }}
          </td>
        </tr>
        <tr v-if="scheduleIntelligentCosts.length != 0">
          <td>操作</td>
          <td :colspan="3" class="operate">
            <el-button @click="handleSave()">保存更改</el-button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
import { reactive, onBeforeUnmount } from 'vue'
import tableJson from './tableBudeget.json'
import { useStore } from 'vuex'
import { updateCostControl } from '@/views/project/api/money-manage'
import { ElMessage } from 'element-plus'
import { NumberCheck } from '@/utils/utils'

export default {
  setup() {
    const data = reactive({
      table: tableJson.contractBudgetList,
    })
    const store = useStore()
    // 经费详情表单
    const scheduleIntelligentCosts = reactive(
      store.state.projectCenter.fundingDetails.scheduleIntelligentCosts
    )

    const handleSave = () => {
      updateCostControl(scheduleIntelligentCosts).then((res) => {
        console.log(res)
        ElMessage({
          message: '提交成功',
          type: 'success',
        })
      })
    }
    onBeforeUnmount(() => {
      console.log('预算经费表格卸载了')
      store.state.projectCenter.fundingDetails.scheduleIntelligentCosts = []
    })
    return {
      data,
      scheduleIntelligentCosts,
      handleSave,
      NumberCheck,
    }
  },
}
</script>

<style scoped lang="scss">
th {
  height: 25px;
}
.title {
  width: 100%;
  text-align: center;
  line-height: 36px;
  background-color: #f0f2f5;
  th {
    width: 200px;
  }
}
.label {
  text-align: center;
  line-height: 28px;
}

input {
  outline: none;
  width: 90%;
  margin: 0 5%;
}
.budgetBox {
  // margin: 0 10%;
  width: 100%;
  background-color: #492222;
  table {
    float: left;
    line-height: 30px;
    td {
      height: 34px;
    }
  }
  justify-content: center;
}
.operate {
  text-align: center;
  button {
    width: 65%;
    margin: 5px;
  }
}
</style>
